<template>
  <div class="album-detail" v-if="albumData">
    <PlaylistHeader>{{ albumData.album.name }}</PlaylistHeader>

    <!-- 头部信息 -->
    <div class="header">
      <div
        class="mask"
        :style="{ backgroundImage: `url(${albumData.album.picUrl})` }"
      ></div>

      <div class="top">
        <div class="thumb">
          <img :src="albumData.album.picUrl | completeImageUrl" alt="" />
        </div>

        <div class="right">
          <div class="top">{{ albumData.album.name }}</div>

          <div class="bottom" v-if="albumData.album.artist">
            <div class="icon">
              <img
                :src="albumData.album.artist.picUrl | completeImageUrl"
                alt=""
              />
            </div>
            <div class="nick">{{ albumData.album.artist.name }}</div>

            <div class="btn" :class="{ active: isFollow }">
              <span
                v-if="!isFollow"
                @click="
                  addFollowPlaylistAuthors({ id: albumData.album.artist.id })
                "
              >
                +关注
              </span>
              <span
                v-else
                @click="
                  removeFollowPlaylistAuthors({ id: albumData.album.artist.id })
                "
              >
                已关注
              </span>
            </div>
          </div>
          <div class="description e_1">
            {{ albumData.album.description }}
          </div>
        </div>
      </div>

      <div class="bottom">
        <!-- 工具条 -->
        <div class="tool-bar">
          <div class="left">
            <!-- 分享面板 -->
            <div class="item icon_base" @click="showShare = true"></div>

            <!-- 添加到稍后听 -->
            <div
              class="item icon_base"
              @click="
                addPlaylistFootprintsWithTips({ playlist: albumData.songs })
              "
            ></div>

            <!-- 歌单漫游 -->
            <div class="item icon_base"></div>

            <!-- 歌单评论 -->
            <div class="item icon_base"></div>
          </div>

          <div class="right">
            <div class="left">
              <img
                src="../../assets/kugou/已关注.png"
                v-if="isSubAlbum"
                @click="removeSubPlaylists({ id: albumData.album.id })"
              />
              <img
                src="../../assets/kugou/未关注.png"
                v-else
                @click="addSubPlaylists({ id: albumData.album.id })"
              />
            </div>

            <div class="right">{{ albumData.album.info.likedCount }}人收藏</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 歌曲 -->
    <div class="list">
      <!-- 播放全部 -->
      <header>
        <div
          class="left"
          @click="addAllSongIntoPlaylist({ list: albumData.songs })"
        >
          <div class="icon icon_base"></div>
          <div class="text">播放全部</div>
          <div class="total" v-if="albumData.songs">
            {{ albumData.songs.length }}
          </div>
        </div>
      </header>

      <van-share-sheet
        v-model="showShare"
        title="立即分享给好友"
        :options="options"
      />

      <!-- 歌曲列表 -->
      <SongListItem
        v-for="item in albumData.songs"
        :key="item.id"
        :item="item"
      />
    </div>
  </div>
</template>

<script>
import PlaylistHeader from "@/components/slot/headerbox/CustomHeader.vue";

import SongListItem from "@/components/basics/SongListItem.vue";
import { mapMutations, mapState } from "vuex";

export default {
  components: {
    PlaylistHeader,
    SongListItem,
  },
  name: "AlbumDetail",
  async created() {
    // 获取专辑详情-动态专辑
    const { id } = this.$route.query;
    const res = await this.axios({ url: "/album", params: { id } });
    this.albumData = res.data;
  },
  data() {
    const options = [
      [
        { name: "微信", icon: "wechat" },
        { name: "朋友圈", icon: "wechat-moments" },
        { name: "微博", icon: "weibo" },
        { name: "QQ", icon: "qq" },
      ],
      [
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
        { name: "小程序码", icon: "weapp-qrcode" },
      ],
    ];
    return {
      albumData: null,
      options,
      showShare: false,
    };
  },

  methods: {
    ...mapMutations([
      "addAllSongIntoPlaylist",
      "addFollowPlaylistAuthors",
      "removeFollowPlaylistAuthors",
      "addPlaylistFootprintsWithTips",
      "addSubPlaylists",
      "removeSubPlaylists",
    ]),


  },
  computed: {
    // 是否关注专辑作者
    isFollow() {
      const { id } = this.albumData.album.artist;
      return this.followPlaylistAuthors.includes(id);
    },

    ...mapState(["followPlaylistAuthors", "subPlaylists"]),

    // 是否收藏歌单
    isSubAlbum() {
      return this.subPlaylists.includes(this.albumData.album.id);
    },
  },
};
</script>

<style lang="less" scoped>
.album-detail {
  margin-top: 50px;

  .header {
    position: relative;
    overflow: hidden;
    padding: 15px;
    transition: all 1s;

    .mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      // 模糊度，亮度
      filter: blur(30px) brightness(0.6);
      transform: scale(1.5);
      background-position: center center;
      background-repeat: no-repeat;
    }

    .top {
      width: 100%;
      display: flex;
      align-items: center;

      .thumb {
        width: 125px;
        position: relative;
      }

      .right {
        width: 210px;
        height: 120px;
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        font-weight: bold;
        padding-left: 20px;

        .bottom {
          width: 100%;
          height: 30px;
          display: flex;
          align-items: center;
          font-weight: normal;

          .icon {
            width: 30px;
            height: 100%;
            text-align: center;
            line-height: 30px;

            img {
              vertical-align: middle;
              border-radius: 50%;
            }
          }

          .nick {
            font-size: 12px;
            padding-left: 10px;
          }

          .btn {
            width: 60px;
            height: 100%;
            border: 1px solid #80737a;
            border-radius: 10px;
            text-align: center;
            line-height: 30px;
            font-size: 14px;
            font-weight: bold;

            &.active {
              color: #80737a;
            }
          }
        }

        .description {
          width: 100%;
          font-size: 12px;
        }
      }
    }

    .tool-bar {
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .left {
        width: 60%;
        height: 80%;
        display: flex;
        justify-content: space-between;

        .item {
          width: 20%;
          height: 100%;
          background-color: #dfcdc9;
          border-radius: 50%;

          &:nth-of-type(1) {
            background-image: url("../../assets/kugou/分享.png");
          }
          &:nth-of-type(2) {
            background-image: url("../../assets/kugou/加.png");
          }
          &:nth-of-type(3) {
            background-image: url("../../assets/kugou/gis_漫游.png");
          }
          &:nth-of-type(4) {
            background-image: url("../../assets/kugou/评论.png");
          }
        }
      }

      .right {
        width: 35%;
        height: 80%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #c3b4b1;
        border-radius: 20px;

        .left {
          width: 40px;
          height: 100%;
          background-color: #dfcdc9;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;

          img {
            width: 25px;
            height: 25px;
          }
        }

        .right {
          font-size: 9px;
          color: #7d6f6c;
          width: 70px;
        }
      }
    }
  }

  .list {
    width: 100%;
    padding: 10px;
    background-color: #fff;

    header {
      width: 100%;
      height: 40px;
      display: flex;
      justify-content: space-between;
      margin: 15px 0;
      position: sticky;
      top: 50px;
      z-index: 5;
      background-color: #fff;

      .left {
        width: 140px;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .icon {
          width: 30px;
          height: 100%;
          background-image: url("../../assets/kugou/播放.png");
          background-size: contain;
        }

        .text {
          font-weight: bold;
        }

        .total {
          color: #707070;
        }
      }
    }
  }
}
</style>
